<template>
  <div
    style="
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #cccccc;
      display: flex;
    "
  >
    <div
      style="
        width: 200px;
        padding-left: 30px;
        font-weight: bold;
        color: dodgerblue;
      "
    >
      资产管理
    </div>

    <!-- 功能区域 -->
    <div style="flex: 1">
      <div style="margin: 0">
        <el-button type="primary" @click="add">新资产入库</el-button>
        <el-button type="primary" @click="resend">IT资产调拨</el-button>
      </div>
      <!-- 新资产入库表单 -->
      <div>
        <el-dialog title="新资产入库" v-model="dialogGoodsFormVisible">
          <el-form
            ref="goodsForm"
            :model="goodsForm"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="固定资产编码" prop="code">
              <el-input v-model="goodsForm.code" style="width: 60%">
                <!-- <template #prepend value>GM-</template> -->
              </el-input>
              <!-- <el-button @click = "txt">cccc</el-button> -->
            </el-form-item>
            <el-form-item label="设备名称" prop="name">
              <!-- <el-input v-model="goodsForm.name" style="width: 60%"></el-input> -->
              <el-select
              v-model="goodsForm.name"
              placeholder="请选择型号"
              filterable
            >
              <el-option
                v-for="item of device"
                :key="item['value']"
                :label="item['value']"
                :value="item['value']"
              ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="品牌型号" prop="type">
              <el-input v-model="goodsForm.type" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="使用人" prop="whichstaff">
              <el-input
                v-model="goodsForm.whichstaff"
                style="width: 60%"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="goodsForm.ps" style="width: 60%"></el-input>
            </el-form-item>

            <el-form-item label="入库类型">
              <el-radio-group v-model="goodsForm.whichstore">
                <el-radio label="IT资产新设备库"></el-radio>
                <el-radio label="IT资产旧设备库"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="RFID条码" prop="rfid">
              <el-button type="primary" @click="bind"> 扫码绑定 </el-button>
              <el-dialog title="新资产入库" v-model="dialogBindFormVisible">
                <el-input
                  v-model="goodsForm.rfid"
                  ref="input"
                  style="width: 60%"
                  @keyup.enter.native="save('goodsForm')"
                ></el-input>
              </el-dialog>
            </el-form-item>
          </el-form>

          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogGoodsFormVisible = false"
                >取 消</el-button
              >
              <el-button @click="resetForm('goodsForm')">重置</el-button>
              <el-button type="primary" @click="save('goodsForm')"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
      <!-- 调拨表单 -->
      <div>
        <el-dialog title="IT资产调拨" v-model="dialogResendFormVisible">
          <el-form
            ref="resendForm"
            :model="resendForm"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="调往部门" prop="whichstore">
              <!-- <el-input v-model="resendForm.whichstore" style="width: 60%"></el-input> -->
              <el-radio-group v-model="resendForm.whichstore">
                <!-- <el-radio label="IT资产新设备库"></el-radio> -->
                <el-radio :label="store[1].name"></el-radio>
                <el-radio :label="store[2].name"></el-radio>
              </el-radio-group>
              <el-select
                v-model="resendForm.whichstore"
                placeholder="请选择部门"
                filterable
              >
                <el-option
                  v-for="item in newstore"
                  :key="item['name']"
                  :label="item['name']"
                  :value="item['name']"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="使用人" prop="whichstaff">
              <el-input
                v-model="resendForm.whichstaff"
                style="width: 60%"
              ></el-input>
            </el-form-item>
            <el-form-item label="RFID条码" prop="rfid">
              <el-input
                v-model="resendForm.rfid"
                style="width: 60%"
                @keyup.enter.native="send('resendForm')"
              ></el-input>
            </el-form-item>
          </el-form>

          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogResendFormVisible = false"
                >取 消</el-button
              >
              <el-button @click="resetForm('resendForm')">重置</el-button>
              <el-button type="primary" @click="send('resendForm')"
                >确 定</el-button
              >
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
    <!-- 用户区域 -->
    <div style="width: 100px">
      <el-dropdown>
        <span class="el-dropdown-link">
          张三<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item @click="$router.push('/login')"
              >退出系统</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  name: "Header.vue",
  data() {
    return {
      dialogGoodsFormVisible: false,
      dialogBindFormVisible: false,
      dialogResendFormVisible: false,
      resendForm: {},
      store: [],
      newstore: [],
      goodsForm: {},
       device: [
        {
          value: "主机",
          label: "主机",
        },
        {
          value: "显示器",
          label: "显示器",
        },
        {
          value: "打印机",
          label: "打印机",
        },
        {
          value: "电话机",
          label: "电话机",
        },
        {
          value: "扫描枪",
          label: "扫描枪",
        },
        {
          value: "笔记本",
          label: "笔记本",
        },
        {
          value: "投影仪",
          label: "投影仪",
        },
      ],
      rules: {
        code: [
          {
            required: true,
            message: "请输入10位固定资产编码",
            trigger: "blur",
            min: 10,
          },
        ],
        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        type: [
          { required: true, message: "请输入设备品牌型号", trigger: "blur" },
        ],
        rfid: [{ required: true, message: "请绑定RFID标签", trigger: "blur" }],
        whichstore: [
          { required: true, message: "请扫描部门识别码", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // console.log(1111);
    // this.load();
    this.getstore();
  },
  methods: {
    add() {
      this.dialogGoodsFormVisible = true;
      this.goodsForm = { code: "GM-" };
      this.goodsForm.whichstore = "IT资产新设备库";
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    bind() {
      // console.log(111);
      this.dialogBindFormVisible = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    save(formName) {
      // console.log(this.form)
      // this.dialogFormVisible = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          console.log(this.goodsForm);
          request.post("/api/goods", this.goodsForm).then((res) => {
            console.log(res);
            if (res.code === "0") {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.dialogGoodsFormVisible = false;
              this.load();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        } else {
          console.log("表单填写有误");
          alert("表单填写有误");
          return false;
        }
      });
    },
    resend() {
      this.dialogResendFormVisible = true;
      this.resendForm = {};
    },
    getstore() {
      request.get("/api/store").then((res) => {
        if (res.code === "0") {
          this.store = res.data.records;
          this.newstore = res.data.records.slice(3, -1);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    send(formName) {
      // console.log(this.form)
      // this.dialogFormVisible = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          // console.log(this.resendForm);
          request
            .put("/api/goods", this.resendForm)
            .then((res) => {
              console.log(res);
              if (res.code === "0") {
                this.$message({
                  type: "success",
                  message: "调拨成功",
                });
                this.dialogResendFormVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            })
            .catch((rej) => {
              this.$message({
                type: "error",
                message: "调拨失败，请检查RFID条码",
              });
            });
        } else {
          console.log("表单填写有误");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>